<script setup lang="ts">
import { h, reactive, onMounted } from 'vue'
import { NForm, NSpace, NFormItem, NInput, NButton, NDataTable, NPopconfirm, useNotification } from 'naive-ui'
import http from '@/tools/http'
import { useUserStore } from '@/stores/userStore'
import { useOrgStore } from '@/stores/orgStore'

const notification = useNotification()
const userStore = useUserStore()
const orgStore = useOrgStore()

type RowData = {
    primaryId?: string
    sessionId?: string
    account?: string
    ip?: string
    userName?: string
    orgCode?: string
}

const onlineUserTableColumns: any = [
    {
        title: "会话Id",
        key: "sessionId",
        width: 250
    }, {
        title: "用户编号(账号)",
        key: "account",
        width: 150
    }, {
        title: "IP地址",
        key: "ip",
        width: 150
    }, {
        title: "用户名称",
        key: "userName",
        width: 150
    }, {
        title: "所属机构",
        key: "orgCode",
        width: 150,
        render(rowData: RowData, rowIndex: number) {
            return orgStore.getOrgName(rowData.orgCode)
        }
    }, {
        title: "操作",
        key: "actions",
        width: 132,
        fixed: 'right',
        render(rowData: RowData, rowIndex: number) {
            return h(
                NSpace, null,
                () => [
                    userStore.hasAuth("online-user:force-logout") ? h(
                        NPopconfirm,
                        {
                            onPositiveClick: (e: MouseEvent) => forceLogout()
                        },
                        {
                            trigger: () => {
                                return h(
                                    NButton,
                                    {
                                        size: "small",
                                        onclick: () => openForceLogout(rowData)
                                    },
                                    { default: () => "强制退出" }
                                )
                            },
                            default: () => { return "确认强制退出该用户？" }
                        }
                    ) : null
                ]
            )
        }
    }
]

const onlineUserList = reactive<RowData[]>([])

const onlineUserSearchFormValue = reactive({
    account: null,
    userName: null,
    paramGroup: null
})

onMounted(() => {
    listOnlineUser()
})

const formData = reactive<RowData>({
    primaryId: "",
    sessionId: "",
    ip: "",
    account: "",
    orgCode: "",
    userName: ""
})

function openForceLogout(row: RowData) {
    formData.primaryId = row.primaryId
    formData.sessionId = row.sessionId
    formData.account = row.account
    formData.orgCode = row.orgCode
    formData.ip = row.ip
    formData.userName = row.userName
}

function listOnlineUser() {
    http.post("/online-user/list", onlineUserSearchFormValue).then(({ data }) => {
        if (data.code === "0") {
            onlineUserList.length = 0
            for (let i = 0; i < data.data.length; i++) {
                onlineUserList.push(data.data[i])
            }
        }
    })
}

function forceLogout() {
    http.post("/online-user/force-logout", formData).then(({ data }) => {
        if (data.code === "0") {
            notification['success']({
                content: '强制退出成功',
                meta: `${data.msg}`,
                duration: 2500,
                keepAliveOnHover: true
            })
            listOnlineUser()
        }
    })
}
</script>

<template>
    <div id="flame-container">
        <div class="search">
            <n-form :model="onlineUserSearchFormValue" inline label-placement="left">
                <n-form-item label="用户编号(账号)" path="account">
                    <n-input v-model:value="onlineUserSearchFormValue.account" placeholder="请输入用户编码" clearable />
                </n-form-item>
                <n-form-item label="用户名称" path="userName">
                    <n-input v-model:value="onlineUserSearchFormValue.userName" placeholder="请输入用户名称" clearable />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="listOnlineUser()">查询</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="data-table" style="top:84px;bottom:12px;padding-top:12px;padding-bottom:12px;">
            <n-data-table :scroll-x="982" :scrollbar-props="{ trigger: 'none' }" style="height:100%" flex-height
                :columns="onlineUserTableColumns" :data="onlineUserList" :bordered="false" />
        </div>
    </div>
</template>

<style scoped>
.display-flex-end {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
</style>